<template>
  <div class="vue-quill-editor">
    <quill-editor
      ref="mwQuillEditor"
      v-model="sonvalue"
      :options="editorOption"
      @change="onEditorChange($event)"
    />
  </div>
</template>
<script>
import { quillEditor, Quill } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { ImageDrop } from 'quill-image-drop-module'
Quill.register('modules/imageDrop', ImageDrop)
// 设置字体大小
const fontSizeStyle = Quill.import('attributors/style/size') // 引入这个后会把样式写在style上
fontSizeStyle.whitelist = [
  '12px',
  '14px',
  '16px',
  '18px',
  '20px',
  '24px',
  '28px',
  '32px',
  '36px'
]
Quill.register(fontSizeStyle, true)
// 设置字体样式
const Font = Quill.import('attributors/style/font') // 引入这个后会把样式写在style上
const fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong']
Font.whitelist = fonts // 将字体加入到白名单
Quill.register(Font, true)

export default {
  name: 'VueQuillEditor',
  components: {
    quillEditor
  },
  props: {
    value: {
      type: [Array, String, Object],
      default: ''
    }
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      editorOption: {
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
              [{ 'list': 'ordered' }, { 'list': 'bullet' }], // 列表
              ['blockquote', 'code-block'], // 引用，代码块
              ['clean'], // 清除字体样式
              ['image'] // 上传图片、上传视频
            ]
          }
        }
      },
      isShow: false,
      sonvalue: ''

    }
  },
  watch: {

  },
  created() {

  },
  mounted() {
    setTimeout(() => {
      // console.log(this.value)
      this.sonvalue = this.value
    }, 300)

    this.initMounted()
  },
  methods: {
    onEditorChange({ quill, html, text }) {
      this.$emit('input', html)
    },

    initMounted() {
      setTimeout(() => {
        this.isShow = true
      }, 100)
    },
    handleImgUpload() {}
  }
}
// ImageExtend: {
//   // 如果不作设置，即{}  则依然开启复制粘贴功能且以base64插入
//   name: 'file', // 图片参数名
//   size: 3, // 可选参数 图片大小，单位为M，1M = 1024kb
//   action: '/res/imgUpload', // 服务器地址, 如果action为空，则采用base64插入图片
//   // response 为一个函数用来获取服务器返回的具体图片地址
//   // 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}
//   // 则 return res.data.url
//   response: res => {
//     return res.data
//   },
//   headers: xhr => {
//     // 上传图片请求需要携带token的 在xhr.setRequestHeader中设置
//     xhr.setRequestHeader(
//       'Authorization',
//       this.getCookie('username')
//         ? this.getCookie('username').token_type +
//                   this.getCookie('username').access_token
//         : 'Basic emh4eTp6aHh5'
//     )
//   }, // 可选参数 设置请求头部
//   sizeError: () => {}, // 图片超过大小的回调
//   start: () => {}, // 可选参数 自定义开始上传触发事件
//   end: () => {}, // 可选参数 自定义上传结束触发的事件，无论成功或者失败
//   error: () => {}, // 可选参数 上传失败触发的事件
//   success: () => {}, // 可选参数  上传成功触发的事件
//   change: (xhr, formData) => {
//     // console.log(1);
//     // xhr.setRequestHeader('myHeader','myValue')
//     // formData.append('token', 'myToken')
//   } // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
// },
</script>
<style lang="scss">
.vue-quill-editor {
  .quill-editor {
    line-height: normal;
    .ql-container.ql-snow {
      line-height: normal !important;
      height: 200px !important;
      font-size: 14px;
    }
    .ql-snow {
      .ql-tooltip[data-mode="link"]::before {
        content: "请输入链接地址:";
      }
      .ql-tooltip.ql-editing a.ql-action::after {
        border-right: 0px;
        content: "保存";
        padding-right: 0px;
      }
      .ql-tooltip[data-mode="video"]::before {
        content: "请输入视频地址:";
      }
      .ql-picker.ql-size {
        .ql-picker-label[data-value="12px"]::before,
        .ql-picker-item[data-value="12px"]::before {
          content: "12px";
        }
        .ql-picker-label[data-value="14px"]::before,
        .ql-picker-item[data-value="14px"]::before {
          content: "14px";
        }
        .ql-picker-label[data-value="16px"]::before,
        .ql-picker-item[data-value="16px"]::before {
          content: "16px";
        }
        .ql-picker-label[data-value="18px"]::before,
        .ql-picker-item[data-value="18px"]::before {
          content: "18px";
        }
        .ql-picker-label[data-value="20px"]::before,
        .ql-picker-item[data-value="20px"]::before {
          content: "20px";
        }
        .ql-picker-label[data-value="24px"]::before,
        .ql-picker-item[data-value="24px"]::before {
          content: "24px";
        }
        .ql-picker-label[data-value="28px"]::before,
        .ql-picker-item[data-value="28px"]::before {
          content: "28px";
        }
        .ql-picker-label[data-value="32px"]::before,
        .ql-picker-item[data-value="32px"]::before {
          content: "32px";
        }
        .ql-picker-label[data-value="36px"]::before,
        .ql-picker-item[data-value="36px"]::before {
          content: "36px";
        }
      }
      .ql-picker.ql-header {
        .ql-picker-label::before,
        .ql-picker-item::before {
          content: "文本";
        }
        .ql-picker-label[data-value="1"]::before,
        .ql-picker-item[data-value="1"]::before {
          content: "标题1";
        }
        .ql-picker-label[data-value="2"]::before,
        .ql-picker-item[data-value="2"]::before {
          content: "标题2";
        }
        .ql-picker-label[data-value="3"]::before,
        .ql-picker-item[data-value="3"]::before {
          content: "标题3";
        }
        .ql-picker-label[data-value="4"]::before,
        .ql-picker-item[data-value="4"]::before {
          content: "标题4";
        }
        .ql-picker-label[data-value="5"]::before,
        .ql-picker-item[data-value="5"]::before {
          content: "标题5";
        }
        .ql-picker-label[data-value="6"]::before,
        .ql-picker-item[data-value="6"]::before {
          content: "标题6";
        }
      }
      .ql-picker.ql-font {
        .ql-picker-label[data-value="SimSun"]::before,
        .ql-picker-item[data-value="SimSun"]::before {
          content: "宋体";
          font-family: "SimSun" !important;
        }
        .ql-picker-label[data-value="SimHei"]::before,
        .ql-picker-item[data-value="SimHei"]::before {
          content: "黑体";
          font-family: "SimHei";
        }
        .ql-picker-label[data-value="Microsoft-YaHei"]::before,
        .ql-picker-item[data-value="Microsoft-YaHei"]::before {
          content: "微软雅黑";
          font-family: "Microsoft YaHei";
        }
        .ql-picker-label[data-value="KaiTi"]::before,
        .ql-picker-item[data-value="KaiTi"]::before {
          content: "楷体";
          font-family: "KaiTi" !important;
        }
        .ql-picker-label[data-value="FangSong"]::before,
        .ql-picker-item[data-value="FangSong"]::before {
          content: "仿宋";
          font-family: "FangSong";
        }
      }
    }
    .ql-align-center {
      text-align: center;
    }
    .ql-align-right {
      text-align: right;
    }
    .ql-align-left {
      text-align: left;
    }
  }
}

</style>
